import React from 'react';
import {
  StyleSheet,
  ScrollView,
  Text,
  TextInput,
  Button,
} from 'react-native';

/* 
- contentContainerStyle       样式穿透到子元素
- keyboardDismissMode         是否要隐藏软键盘。
  - 'none' （默认值），拖拽时不隐藏软键盘。
  - 'on-drag'，当拖拽开始的时候隐藏软键盘。

- keyboardShouldPersistTaps   有软键盘，那么点击 scrollview 后是否收起键盘
  - 'never' （默认值），点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
  - 'always'，键盘不会自动收起，ScrollView 也不会捕捉点击事件，但子组件可以捕获。
  - 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。

- scrollEventThrottle    滚动事件触发频率

*/

export default () => {
  
  const buildListView = () => {
    const array = [];
    for (let i = 0; i < 20; i++) {
      array.push(
        <Text key={`item-${i}`} style={styles.txt}>{`List item ${i + 1}`}</Text>
      );
    }
    return array;
  }

  return (
    <ScrollView
      style={styles.root}
      contentContainerStyle={styles.containerStyle}
      keyboardDismissMode='on-drag'
      keyboardShouldPersistTaps='handled'
      onMomentumScrollBegin={() => {
        // console.log('onMomentumScrollBegin ...')
      }}
      onMomentumScrollEnd={() => {
        // console.log('onMomentumScrollEnd ...')
      }}
      onScroll={(event) => {
        console.log(event.nativeEvent.contentOffset.y);
      }}
      scrollEventThrottle={16}
      overScrollMode='never'
      scrollEnabled={true}
      // contentOffset={{ y: 100 }}
      showsVerticalScrollIndicator={false}
      stickyHeaderIndices={[1]}
    >
      <TextInput style={styles.input} />
      <Button title='按钮' onPress={() => {
        // scrollViewRef.current.scrollTo({y: 500, animated: true});
        // scrollViewRef.current?.scrollToEnd({ animated: true });
      }} />
      {buildListView()}
    </ScrollView>
    // <ScrollView style={{ width: '100%', height: 200 }} horizontal={true} pagingEnabled={true}>
    //     <View style={{ width, height: 200, backgroundColor: 'red' }} />
    //     <View style={{ width, height: 200, backgroundColor: 'blue' }} />
    //     <View style={{ width, height: 200, backgroundColor: 'green' }} />
    // </ScrollView>
  );
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
  },
  txt: {
    width: '100%',
    height: 56,
    textAlignVertical: 'center',
    fontSize: 24,
    color: 'black'
  },
  containerStyle: {
    paddingHorizontal: 16,
    backgroundColor: '#E0E0E0',
    paddingTop: 20,
  },
  input: {
    width: '100%',
    height: 60,
    backgroundColor: '#ff000050',
  },
});
